<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *,
        body {
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            justify-content: space-around;
            align-items: center;
            min-height: 100vh;
        }

        .container {
            width: 200px;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            border: 2px solid #333;
            padding: 10px;
            border-radius: 10px;
        }

        .container button {
            width: 100px;
            height: 20px;
        }
        .container button:nth-of-type(3){
            margin-bottom: 10px;
        }

        .container .box {
            width: 200px;
            height: 200px;
            border-radius: 10px;
        }

        .container .box:nth-of-type(1) {
            background-color: pink;
            display: block;
        }

        .container .box:nth-of-type(2) {
            background: cornflowerblue;
            display: none;
        }

        .container .box:nth-of-type(3) {
            background-color: wheat;
            display: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <button>按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <div class="container">
        <button>上一页</button>
        <button>随机页</button>
        <button>下一页</button>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <div class="container">
        <button>按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <script>
        //要求用面向对象写

        //这里是直接获取,老师做了封装

        //老师的优点:把点击按钮改变div的方法封装起来了
        //我这里的优点:不用分开写类名.(container,button,div这些都是复用的)
        //我这里的缺点:把按钮点击和生成索引写在一起了
        //总结:点击按钮根据改变盒子是共通的,生成对应索引是随机的。可以把前者抽象出来

        let containers = document.querySelectorAll('.container')

        //给第一个选项卡设置功能
        function firstButtonRender() {
            let btns = containers[0].querySelectorAll('button')
            let divs = containers[0].querySelectorAll('div')
            btns.forEach((item, index) => {
                item.onclick = function () {
                    divs.forEach((ditem, dindex) => {
                        if (index === dindex) {
                            ditem.style.display = 'block'
                        } else {
                            ditem.style.display = 'none'
                        }
                    })
                }
            });
        }
        //给第二个绑定功能
        function secondButtonRender() {
            let btns = containers[1].querySelectorAll('button')
            let divs = containers[1].querySelectorAll('div')
            let key = 0;
            btns[0].addEventListener('click',()=>{
                key --
                if(key<0){
                    key = divs.length-1
                }
            })
            btns[2].addEventListener('click',()=>{
                key ++
                if(key>=divs.length){
                    key = 0
                }
            })
            btns[1].addEventListener('click',()=>{
                key = Math.floor(Math.random()*3)
            })
            btns.forEach((item)=>{
                item.addEventListener('click',()=>{
                console.log(key);
                    divs.forEach (item => item.style.display = 'none');
                    divs[key].style.display = 'block'
                })
            })

        }

        function thirdButtonRender() {
            let divs = containers[2].querySelectorAll('div')
            var key = 0;
            console.log(key);
            setInterval(()=>{
                key ++;
                if(key > 2){
                    key = 0
                }
                divs.forEach (item => item.style.display = 'none');
                divs[key].style.display = 'block'
            },800)
        }

        //给所有选项卡绑定功能,是分开绑定,但绑定的功能一样
        // function buttonRender() {
        //     containers.forEach((item) => {
        //         let btns = item.querySelectorAll('button')
        //         let divs = item.querySelectorAll('div')
        //         btns.forEach((item, index) => {
        //             item.onclick = function () {
        //                 divs.forEach((ditem, dindex) => {
        //                     if (index === dindex) {
        //                         ditem.style.display = 'block'
        //                     } else {
        //                         ditem.style.display = 'none'
        //                     }
        //                 })
        //             }
        //         });
        //     })
        // }


        (function init() {
            firstButtonRender()
            secondButtonRender()
            thirdButtonRender()
        })()
    </script>
</body>

</html>